<template>
  <el-dialog
    v-loading="$loadingPlugin.getDetailData"
    v-el-drag-dialog
    element-loading-text="加载中..."
    :title="title"
    :visible.sync="visible"
    width="800px"
    @closed="close"
  >
    <ul class="detail-content">
      <li v-for="(item, index) in data" :key="index">
        <div class="info">
          <span>{{ item.traceTime }}</span>
          <span>{{ item.contacter }}</span>
        </div>
        <div class="step" :style="{ backgroundImage: 'url(' + ring + ')' }">
          <span>{{ item.idx }}</span>
          <span />
        </div>
        <p>
          <span>
            {{ item.traceDesc }}
          </span>
          <span v-if="item.facilityName">
            发生部门 --- {{ item.facilityName }}
          </span>
        </p>
      </li>
    </ul>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { crmOrderTrace } from '@/api'
  import dayjs from 'dayjs'
  export default {
    name: 'call-circulation',
    data() {
      return {
        ring: require('@/assets/ring.png'),
        visible: false,
        data: [],
        currentRow: undefined,
        title: '订单流转信息'
      }
    },
    methods: {
      open(val) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (val) {
            this.currentRow = val
            this.title = `订单流转信息--订单号${this.currentRow.orderCode}`
            this.getCirculation()
          }
        })
      },

      async getCirculation() {
        const params = {
          // corpSN: this.currentRow.corpSN,
          orderCode: this.currentRow.orderCode
        }
        const res = await crmOrderTrace(params)
        if (res && res.data) {
          this.data = res.data.map((item, index) => ({
            ...item,
            idx: index + 1,
            traceTime: item.traceTime
              ? dayjs(item.traceTime).format('YYYY-MM-DD HH:mm:ss')
              : ''
          }))
          this.data = this.data.reverse()
        }
      },
      close() {
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.detail-content {
  min-height: 450px;
  li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .info {
      max-width: 130px;
      min-width: 180px;

      span {
        display: block;
        min-width: 120px;
        text-align: right;
      }
      span:nth-child(2) {
        height: 20px;
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
        word-break: break-all;
        box-sizing: border-box;

        @include nowrap(1);
      }
    }
    .step {
      position: relative;
      width: 56px;
      height: 56px;
      margin: 0 20px;
      line-height: 56px;
      text-align: center;
      background-position: center;
      background-size: 100% 100%;
      span:nth-child(2) {
        position: absolute;
        bottom: -33px;
        left: 24px;
        display: block;
        width: 8px;
        height: 45px;
        background-color: #8ad8d8;
      }
    }
    p {
      width: 100%;
      max-width: 450px;
      span {
        display: block;
      }
      span:nth-child(1) {
        max-height: 32px;
        margin-bottom: 10px;

        @include nowrap(2);
      }
      span:nth-child(2) {
        font-size: 16px;
        text-align: right;
      }
    }
  }
}
</style>
